<template>
  <div class="add-form">
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" @close="closeHandle()">
      <el-form ref="dataForm" :model="formBase" label-position="left" label-width="150px">
        <el-form-item label="编码：" prop="code">
          <el-input v-model="formBase.code" placeholder="请输入编码"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称：" prop="brandName">
          <el-input v-model="formBase.brandName" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="index">
          <el-input v-model="formBase.sort" type="text" style="width: 200px;" @input="validHandle" placeholder="请输入排序序号"></el-input>
        </el-form-item>
        <el-form-item label="图片地址：" prop="image">
          <div class="finish_room">
            <div>
              <el-upload
                :action="$uploadUrl"
                :data="fullUpType"
                :on-success="uploadSuccess"
                :on-remove="handleRemove"
                :file-list="filelist"
                list-type="picture-card"
                :limit='1'
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">取消</el-button>
        <el-button type="primary" @click="createData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updateData, addData } from '@/api/componentBrand'
export default {
  name: 'add',
  props: ['dialogTitle'],
  data() {
    return {
      dialogFormVisible: false,
      formBase: {
        name: '',
        businessLicenseUrl: ''
      },
      filelist: [],
      uploadDisabled: false,
      fullUpType: { type: 7, extension: 'img' },
      corporationBackUrl: []
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV(val) {
      this.dialogFormVisible = true
      if (val !== undefined) {
        this.formBase = val
        console.log(val)
        this.filelist = val.image ? [{name: 'img', url: val.image}] : []
      }
    },
    uploadSuccess(obj, file) {
      this.formBase.image = obj
    },
    handleRemove(file, fileList) {
      this.formBase.uploadDisabled = false
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
    },
    closeHandle() {
      this.formBase = {}
      this.filelist = []
    },
    validHandle(val) {
      const reg = /^[1-9]\d*|0$/
      if (!reg.test(val)) {
        this.formBase.sort = 0
      } else if (val > 9999) {
        this.$message.error('序号输入不能太大！')
        this.formBase.sort = 0
      }
    },
    // 表单提交
    createData() {
      this.$refs['dataForm'].validate(async valid => {
        if (valid) {
          this.dialogFormH()
          let data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            await updateData(data).then((res) => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            await addData(this.formBase).then((res) => {
              this.$emit('newDataes', this.formBase)
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  },
  // 挂载结束

  mounted: function() {},
  // 创建完毕状态
  created() {
  },
  // 组件更新
  updated: function() {}
}
</script>
<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
</style>
<style lang="scss" scoped>
  .finish_room{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    .room_img {
      width: 150px;
      height: 150px;
      margin-right: 10px;
      position: relative;
      overflow: hidden;
      span {
        position: absolute;
        width: auto;
        height: auto;
        right: 5px;
        bottom: 3px;
    }
  }
    .imgInfo {
      display: flex;
      position: relative;
      width: 150px;
      height: 150px;
      background: #fff;
      border: 1px dashed #c0ccda;
      border-radius: 4px;
      z-index: 9;
      img {
        width: 100%;
        margin: auto;
        align-items: center;
        border-radius: 4px;
    }
      &:hover{
        &::before{
          content: 'del';
          position: absolute;
          left:0px;
          top:0px;
          text-align: center;
          line-height: 150;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          width: 150px;
          height: 150px;
      }
        & .el-icon-delete{
          position: absolute;
          color:#fff;
          left: calc(50% - 8px);
          top: calc(50% - 8px);
      }
    }
  }
  }
</style>
